<template>
  <div>
    <div class="page_header">
      <div>
        <span>任务类型：</span>
        <a-select v-model="taskID" style="width: 220px">
          <a-select-option :value="''">全部</a-select-option>
          <a-select-option v-for="(item,key) in taskIdList" :key="key" :value="item.id" @click="setTypeList(item)">{{item.task_name}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">任务要求：</span>
        <a-select v-model="taskType" style="width: 220px">
          <a-select-option :value="''">全部</a-select-option>
          <a-select-option v-for="(item,key) in taskTypeList" :key="key" :value="key">{{item}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">任务状态：</span>
        <a-select style="width: 220px" v-model="searchStatus">
          <a-select-option value="0">全部</a-select-option>  
          <a-select-option value="1">未完成</a-select-option>
          <a-select-option value="2">审核中</a-select-option>
          <a-select-option value="3">任务通过</a-select-option>
          <a-select-option value="4">任务失败</a-select-option>
        </a-select>
        <span style="padding-left:18px">用户账号：</span>
        <a-input
        placeholder="请输入用户账号"
        v-model="searchText"
        style="width:220px;"
        />
        <a-button type="primary" @click="onSearch" :loading="searchLoading">搜索</a-button>  
      </div>
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="task_url"  slot-scope="text,record">
        <ellipsis :length="14" tooltip>{{record.task_url}}</ellipsis>
      </template> 
      <template slot="action"  slot-scope="text,record"> 
          <a-button   type="primary" @click="checkDetail(record)">查看详情</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import { queryTask, taskLists } from '@/api/getData'
import { Ellipsis } from '@/components'
export default {
  name: 'QueryTask',
  components: {
   Ellipsis
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'sort_id'
            },
            {
            title: '领取ID',
            dataIndex: 'id'
            },
            {
            title: '任务ID',
            dataIndex: 'lid'
            },
            {
            title: '任务名称',
            dataIndex: 'task_name'
            },
            {
            title: '用户账号',
            dataIndex: 'phone'
            },
            {
            title: '任务链接',
            dataIndex: 'task_url',
            scopedSlots: { customRender: 'task_url' },
            width: 160
            },
            {
            title: '奖励积分',
            dataIndex: 'task_integral'
            },
            {
            title: '任务类型',
            dataIndex: 'task_type'
            },
            {
            title: '任务状态',
            dataIndex: 'status'
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: '',
        searchStatus: '0',
        taskID: '',
        taskType: '',
        taskIdList: [],
        taskTypeList: []
    }
  },
  mounted () {
    
    this.queryTaskList()
  },
  methods: {
    resetvalue(){
      this.taskID = ''
      this.taskType = ''
      this.taskTypeList = []
      this.searchStatus = '0'
      this.searchText = ''
    },
    setTypeList(item){
      // this.taskTypeList = typeList[item.template]
      this.taskTypeList = item.task_type
      this.taskType = ''
    },
    checkDetail(record){
        console.log(record)
        sessionStorage.setItem("taskItem",JSON.stringify(record));
        this.$router.push({path: '/taskadmin/taskDetail'})
    },  
    async queryTaskList(){
        this.tableLoding = true
        await taskLists(1).then(res=>{
          let list  = res.data.list;
          this.taskIdList = list
        })
        queryTask(this.pagination.current,this.pagination.pageSize,this.searchText,this.searchStatus,this.taskID,this.taskType).then(res=>{
            console.log(res)
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
            this.resetvalue()
        })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.queryTaskList()
    },
    setSearchStatus(value){
      this.searchStatus = value
    }
  }
}
</script>

<style scoped>
.page_header{
    margin-bottom:20px; 
    display:flex;
}
</style>
